import React from 'react';
import {Card} from 'antd';
import echartTheme from '../themeLight';
// import echarts from 'echarts'; 全部导入
import echarts from 'echarts/lib/echarts'; //按需导入

// 导入柱形图
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import ReactEcharts from 'echarts-for-react'

export default class Bar extends React.Component{

    componentWillMount() {
      echarts.registerTheme('hyyqc',echartTheme)
    };

    getOption = () => {
      let option = {
          title:{
            text:'用户骑行订单'
          },
          tooltip:{
            trigger:'axis'
          },
          xAxis: {
            data:['周一','周二','周三','周四','周五','周六','周日']
          },
          yAxis: {
              type:'value'
          },
          series: [
              {
                  name: '订单量',
                  type:'bar',
                  data:[1000,2000,1500,3000,2000,1200,800]
              }
          ]
      };
      return option
    };

    getOption2 = () => {
        let option = {
            title:{
                text:'用户骑行订单'
            },
            legend:{
                data:['ofo','mobike','hellobike']
            },
            tooltip:{
                trigger:'axis'
            },
            xAxis: {
                data:['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type:'value'
            },
            series: [
                {
                    name: 'ofo',
                    type:'bar',
                    data:[2000,3000,5500,7000,9000,10200,19800]
                },
                {
                    name: 'mobike',
                    type:'bar',
                    data:[1500,3000,4500,6000,8000,11200,20800]
                },
                {
                    name: 'hellobike',
                    type:'bar',
                    data:[3000,5000,7500,3000,9000,15000,21800]
                }
            ]
        };
        return option
    };

    render() {
        return (
            <div className="wrap">
                <Card title="柱形图表之一">
                    <ReactEcharts option={this.getOption()} theme="hyyqc" style={{height:500}}/>
                </Card>
                <Card title="柱形图表之二" style={{marginTop:20}}>
                    <ReactEcharts option={this.getOption2()} theme="hyyqc" style={{height:500}}/>
                </Card>
            </div>
        )
    }
}